<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    {{name}} 非常帅,有个{{num}}女孩子要为你生孩子
    <br>
    <input type="text" v-model="num">
</div>
<script src="./node_modules/vue/dist/vue.js">
</script>
<script>
    var dataObj = {
        name: "刘德华",
        num: 0
    }
    //双向绑定
    var vm = new Vue({
        el: "#app",
        data:dataObj,
        beforeCreate() {
            console.log("beforeCreate:" + this.name);
        },
        created() {
            //发送ajax请求
            console.log("created:" + this.name);
        },
        beforeMount() {
            console.log("beforeMount");
        },
        mounted() {
            //发送ajax请求 就是你需要操作dom的时候在这里写代码
            console.log("mounted");
        },
        beforeUpdate() {
            console.log("beforeUpdate");
        },
        updated() {
            console.log("updated");
        },
        beforeDestroy() {
            console.log("beforeDestroy");
        },
        destroyed() {
            console.log("destroyed");
        }
    });
</script>
</body>
</html>